<html>
<head><title>SerenityOS: From zero to HTML in a year</title></head>
<body>
    <h1>SerenityOS: From zero to HTML in a year</h1>
    <p>
    <blink><b>Hello friends!</b></blink>
    </p>
    <p>
        The Serenity operating system turns 1 year old today. I'm counting
        from the <a href="https://github.com/SerenityOS/serenity/commit/5a300551574451fbf509685d11095bda4fcb20be">first commit</a> in the
        <a href="https://github.com/SerenityOS/serenity/">git repository</a>,
        on October 10, 2018.
        Parts of the code had been around for a while before that, so this
        first commit was really about putting everything I was tinkering
        with into a shared repo.
    </p>
    <p>Anyways... we have to start somewhere!</p>
    <p>
        <b>NOTE:</b> This web page is very light on HTML/CSS features so that it
        can be rendered by Serenity's own Browser!
    </p>
    <p>
        In the beginning there were four components:
    </p>
    <ul>
        <li>The AK utility library</li>
        <li>An ELF executable loader</li>
        <li>An ext2 filesystem parser</li>
        <li>A simple GUI toolkit on top of SDL</li>
    </ul>
    <p>
        These were just some little C++ projects I had been tinkering with
        after installing Slackware 11 on an old PC to do some hacking.
        None of them were very mature, but it was fun, and I was in a place
        where I needed to do some programming to find myself again.
    </p>
    <p>
        Here's how the ext2 filesystem parser looked like when running:
    </p>
    <pre>
    ::&gt;cd /home/andreas
    ::&gt;ls -l
    [VFS] ls ///home/andreas -&gt; ext2fs 01:00000017
    01:00000017 drwxr-xr-x        1024 2018-10-08 13:47:04 ./
    01:00000016 drwxr-xr-x        1024 2018-10-02 23:43:49 ../
    01:00000018 -rw-r--r--          18 2018-10-02 23:44:09 file1
    01:00000019 -rw-r--r--          18 2018-10-02 23:44:14 file2
    ::&gt;
    </pre>
    <div>
        <p><b>2018-10-10:</b> The first ever "screenshot" of what became Serenity:</p>
        <a href="2018-10-10.png"><img src="thumb.2018-10-10.png"></a>
    </div>
    <p>
        I imported a little x86 kernel I had been working on earlier in
        the year. It was a piece of crap, but it was a place to start.
        I originally had some weird idea that kernels should be written
        in C, so I had tried to write in C, but I thankfully realized very
        quickly that I was being silly. :^)
    </p>
    <div>
        <p><b>2018-11-08:</b> Serenity running inside a virtual machine:</p>
        <a href="2018-11-08.png"><img src="thumb.2018-11-08.png"></a>
    </div>
    <p>
        I kept working on the GUI toolkit on my Linux system, while also
        developing the standalone system. This is how far I got with the
        GUI while it was still sitting on top of SDL on Linux:
    </p>
    <div>
        <p><b>2019-01-09:</b> The "Widgets" test program in an SDL framebuffer:</p>
        <a href="2019-01-09.png"><img src="thumb.2019-01-09.png"></a>
    </div>
    <p>
        I then decided it was time to get this running on top of Serenity's
        own kernel. A day later, I saw this running in a VM for the first time.
        It was the most beautiful thing I had ever seen.
    </p>
    <div>
        <p><b>2019-01-10:</b> Serenity booting into a GUI for the first time:</p>
        <a href="2019-01-10.png"><img src="thumb.2019-01-10.png"></a>
    </div>
    <p>
        I started working on a userspace API for doing GUI stuff. The original
        version was a monstrosity with the window server running in the kernel
        and processes making syscalls to create windows, etc.
    </p>
    <div>
        <p><b>2019-01-21:</b> Seeing how many "guitest" processes I can spawn:</p>
        <a href="2019-01-21.png"><img src="thumb.2019-01-21.png"></a>
    </div>
    <div>
        <p><b>2019-02-03:</b> Added FontEditor and Clock, ported GNU bc:</p>
        <a href="2019-02-03.png"><img src="thumb.2019-02-03.png"></a>
    </div>

    <div>
        <p><b>2019-02-08:</b> Wallpaper support, a "top" program, and more:</p>
        <a href="2019-02-08.png"><img src="thumb.2019-02-08.png"></a>
    </div>

    <div>
        <p><b>2019-02-11:</b> First implementation of menus! And a very early FileManager:</p>
        <a href="2019-02-11.png"><img src="thumb.2019-02-11.png"></a>
    </div>

    <div>
        <p><b>2019-02-28:</b> Early version of ProcessManager (today called SystemMonitor):</p>
        <a href="2019-02-28.png"><img src="thumb.2019-02-28.png"></a>
    </div>

    <p>
        Somewhere around here I figured it would be cool to add networking support,
        so I started building a network stack.
    </p>

    <div>
        <p><b>2019-03-12:</b> My host machine is pinging me!</p>
        <a href="2019-03-12.png"><img src="thumb.2019-03-12.png"></a>
    </div>

    <div>
        <p><b>2019-03-15:</b> The first thing I did when TCP kinda worked was build an IRC client:</p>
        <a href="2019-03-15.png"><img src="thumb.2019-03-15.png"></a>
    </div>

    <div>
        <p><b>2019-03-29:</b> Using FileManager to drive development of tree and icon views:</p>
        <a href="2019-03-29.png"><img src="thumb.2019-03-29.png"></a>
    </div>

    <div>
        <p><b>2019-04-11:</b> First screenshot of VisualBuilder, a Visual Basic inspired GUI design tool:</p>
        <a href="2019-04-11.png"><img src="thumb.2019-04-11.png"></a>
    </div>

    <div>
        <p><b>2019-04-20:</b> I made a Snake game. You gotta have snake!</p>
        <a href="2019-04-20.png"><img src="thumb.2019-04-20.png"></a>
    </div>

    <div>
        <p><b>2019-04-22:</b> First semi-successful GCC port. It can only compile small C programs:</p>
        <a href="2019-04-22.png"><img src="thumb.2019-04-22.png"></a>
    </div>

    <div>
        <p><b>2019-06-14:</b> Started building PaintBrush, a simple painting application:</p>
        <a href="2019-06-14.png"><img src="thumb.2019-06-14.png"></a>
    </div>

    <div>
        <p><b>2019-07-14:</b> After the system got basic sound support, I built Piano, a desktop synthesizer:</p>
        <a href="2019-07-14.png"><img src="thumb.2019-07-14.png"></a>
    </div>

    <div>
        <p><b>2019-08-27:</b> New menu look inspired by Microsoft circa 2002:</p>
        <a href="2019-08-27.png"><img src="thumb.2019-08-27.png"></a>
    </div>

    <div>
        <p><b>2019-09-09:</b> Ladies and gentlemen, we've got DOOM:</p>
        <a href="2019-09-09.png"><img src="thumb.2019-09-09.png"></a>
    </div>

    <div>
        <p><b>2019-09-29:</b> Working on basic CSS support in LibHTML:</p>
        <a href="2019-09-29.png"><img src="thumb.2019-09-29.png"></a>
    </div>

    <div>
        <p><b>2019-10-10</b> Viewing <b>this webpage</b> in Serenity's Browser!</p>
        <a href="2019-10-10.png"><img src="thumb.2019-10-10.png"></a>
    </div>
    <p>
        And with that, this little screenshot tour of the first year of Serenity is over.
    </p>
    <p>
        If you would like to see more, I've also been making regular monthly update videos
        throughout the year:
    </p>
    <ul>
        <li><a href="https://www.youtube.com/watch?v=hE52D-zbX3g">Serenity OS update (March 2019)</a></li>
        <li><a href="https://www.youtube.com/watch?v=RBr5If8GrM4">Serenity OS update (April 2019)</a></li>
        <li><a href="https://www.youtube.com/watch?v=KHpGvwBTRxM">Serenity OS update (May 2019)</a></li>
        <li><a href="https://www.youtube.com/watch?v=-SQP3E67bnc">Serenity OS update (June 2019)</a></li>
        <li><a href="https://www.youtube.com/watch?v=YfTAezcRPs8">Serenity OS update (July 2019)</a></li>
        <li><a href="https://www.youtube.com/watch?v=h76Ah4oKfKE">Serenity OS update (August 2019)</a></li>
        <li><a href="https://www.youtube.com/watch?v=vK0h_Ih4dw4">Serenity OS update (September 2019)</a></li>
    </ul>
    <p>
        To all the boys and girls who have helped out in the last year, with code, bug reports,
        docs, commenting on videos, e-mailing, hanging out on IRC, retweeting, telling your friends, etc,
        thank you! I'm so grateful for all the love this project has been getting.
    </p>
    <p>
        And also, a huge <b>thank you!</b> to everyone who has supported me via
        <a href="https://patreon.com/serenityos">Patreon</a>
        and other donation methods! It's my dream to turn this into a full time show some day,
        and you're a huge part of keeping that dream alive. :)
    </p>
    <p>
        Let's see what we can do in year 2!
    </p>
    <p>
        <i>Andreas Kling, 2019-10-10</i>
    </p>
    <p>
    <a href="https://github.com/awesomekling">GitHub</a> |
    <a href="https://youtube.com/c/AndreasKling">YouTube</a> |
    <a href="https://twitter.com/awesomekling">Twitter</a> |
    <a href="https://patreon.com/serenityos">Patreon</a> |
    <a href="https://paypal.me/awesomekling">PayPal</a>
    </p>
</body>
</html>
